<!DOCTYPE html>
<html>

<head>
    <title>打卡</title>
    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
</head>

<body>

    <div>
        <p id='message' style="color:red"></p>
    </div>
    <div>

        <h3 style="display:inline">用户信息：</h3>
        <input type="button" id='btnLogout' style="display:none" value="登出">
        <a href="history.html" style="float:right">历史记录</a>
        <p>登陆状态信息：
            <span id='rec_status'></span>|
            <span id='rec_phone'></span>
        </p>
        <p>用户位置信息:
            <span id='rec_loc'></span>|
            <span id='rec_geoLoc'></span>
            <a href='/point.html' style="padding-left:5px;text-decoration: none;">更改位置</a>
        </p>
    </div>
    <div style="display:none" id='loginZone'>
        <p>登陆</p>
        <p>Phone:
            <input id='phone' value='' />
            <input type="button" id='btnSendSMS' value="发送Code">
        </p>
        <p>Code :
            <input id='code' maxlength="6" />
            <input type="button" id='btnLogin' value="登陆">
        </p>
    </div>


    <p>
        <input type="button" value="签到" id='btnSign' disabled>
    </p>


</body>
<script src="cookie.js"></script>
<script src="api.js"></script>
<script src="pointTran.js"></script>



<script src="script/react.min.15.4.2.js"></script>
<script src="script/react-dom.min.15.4.2.js"></script>
<script src="script/react-router.min.2.8.1.js"></script>
<script src="script/redux.min.3.6.0.js"></script>

<script src="script/moment.min.2.18.1.js"></script>
<script src="script/moment-with-zh-cn.2.18.1.js"></script>
<script src="script/crypto-js.js"></script>


<script src="script/vendor.js"></script>
<script src="script/app.js"></script>


<script>
    // 初始化全局变量
    localStorage.setItem('xrxsZhiChiParams', JSON.stringify({
        "partnerId": "a8633497bd2411e68d9500163e2ecffb"
    }))
    localStorage.setItem('lat',"31.183753")
    localStorage.setItem('lng',"121.451771")
    localStorage.setItem('loc',"上海市易恒健康科技有限公司|徐汇区")
    window.__oneApmKey__ = "[1d4IUc>3("
    window.__tingyunLoaction__ = JSON.parse(localStorage.xrxsZhiChiParams || "{}").partnerId || "Yf&*#";
    CryptoJS.a = CryptoJS.enc.Base64
    CryptoJS.c = function (message, key) {
        return new CryptoJS.algo.HMAC.init(CryptoJS.algo.SHA1, key).finalize(message);
    }
</script>


<script>
    let code_id /* sms code_id*/ , crsfToken /* crsf Token */

    //发送验证
    btnSendSMS.addEventListener('click', async () => {
        try {
            let result = await sendSMSCode(phone.value)
            result.status ? code_id = result.data['code_id'] : displayMessage(result)
        } catch (err) {
            message.innerText = err.message
        }
    })

    //模拟登陆
    btnLogin.addEventListener('click', async () => {
        try {
            let result = await login(phone.value, code.value, code_id)
            if (result.status) {
                loginZone.style.display = 'none' //隐藏登陆区域
                btnSign.removeAttribute('disabled') //允许打卡

                //更新cookie过期时间，设置7天过期
                let QJYDSID = Cookies.get('QJYDSID')
                Cookies.remove('QJYDSID')
                Cookies.set('QJYDSID', QJYDSID, {
                    expires: 30
                })

                //保存当前登陆手机号码
                localStorage.setItem('phone', phone.value)

                //显示登出
                btnLogout.style.display = 'inline'

                //显示登陆状态，设置的地址等
                setPanelInfo()

                //告知登陆成功
                alert(result.message || '登陆成功')


            } else {
                //显示错误消息
                displayMessage(result)
            }
        } catch (err) {
            message.innerText = err.message
        }
    })

    //登出
    btnLogout.addEventListener('click', () => {
        //清除cookie
        Cookies.remove('QJYDSID')
        //清除不必要的消息
        clearInfo()
        //刷新页面
        setTimeout(function () {
            window.location.reload()
        }, 100)
    })

    //签到
    btnSign.addEventListener('click', () => {
        try {
            executeSign()
        } catch (err) {
            message.innerText = `未知异常：` + JSON.stringify(err)
        }
    })

    //执行打卡
    async function executeSign() {
        //获取 csrf Token
        let tokenRes = await csrfToken()
        if (tokenRes.status) {
            crsfToken = tokenRes.data.csrf
            //let result = await sign(116.27675861439648, 40.04732987671876, crsfToken)
            //获取转换后的经纬度
            let loc = getGeoLocation()
            //loc.lng = 119.27675861439648
            //loc.lat = 42.04732987671876
            //签到
            let result = await sign(loc.lng, loc.lat, crsfToken)
            result.status ? saveHistory() && alert('签到成功') : displayMessage(result)
        } else {
            displayMessage(tokenRes)
        }
    }


    //初始化页面
    function init() {
        //检查登陆状态
        var qjydsid = getCookie('QJYDSID')
        if (!qjydsid) {
            loginZone.style.display = 'block'
        } else {
            loginZone.style.display = 'none'
            btnSign.removeAttribute('disabled') //允许打卡
        }

        //检查地址设置情况
        // if (localStorage.getItem('lat') == null || localStorage.getItem('lng') == null) {
        //     window.location.href = '/point.html'
        // }

        //设置登陆状态等信息
        setPanelInfo()

    }

    //获取经纬度
    let tran = getTrans()

    function getGeoLocation() {
        let lng = localStorage.getItem('lng'),
            lat = localStorage.getItem('lat'),
            //转换
            pp1 = tran.bd09togcj02(lng, lat),
            pp2 = tran.gcj02towgs84(pp1[0], pp1[1])

        return {
            lng: pp2[0],
            lat: pp2[1]
        }
    }

    //设置登陆状态，手机号码，经纬度等信息
    function setPanelInfo() {
        var qjydsid = getCookie('QJYDSID')
        rec_status.innerText = qjydsid ? '已登陆' : '未登录' //登陆状态
        rec_phone.innerText = localStorage.getItem('phone') || '' //登陆的手机号码
        rec_loc.innerText = localStorage.getItem('loc') || '' //当前保存的地址
        rec_geoLoc.innerText = (localStorage.getItem('lng') || '') + ',' + (localStorage.getItem('lat') || '') //当前保存的经纬度信息
        btnLogout.style.display = qjydsid ? 'inline' : 'none' //登出按钮
    }


    //显示错误消息，必要时跳转到登陆页面
    function displayMessage(result) {
        //登陆状态失效
        if (result.code && result.code == 4001) {
            Cookies.remove('QJYDSID')
            clearInfo()
            setTimeout(function () {
                window.location.reload();
            }, 100)
        }
        message.innerText = result.message + (result.data && result.data.msg ? '|' + result.data.msg : '')
    }

    //清除不必要的信息
    function clearInfo() {
        localStorage.removeItem('phone')
    }

    init()

    function saveHistory() {
        let dataStr = localStorage.getItem('history'),
            data = dataStr ? JSON.parse(dataStr) : []

        if (!Array.isArray(data)) {
            data = []
        }

        let d = new Date(),
            date = d.toLocaleDateString(),
            time = d.toLocaleTimeString()
        dList = data.find(v => v.date === date)
        if (dList) {
            dList.records.unshift(time)
        } else {
            data.unshift({
                date,
                records: [time]
            })
        }

        localStorage.setItem('history', JSON.stringify(data.slice(0, 180)))
        return true
    }

    //博彦科技大厦 116.289448,40.054959
    //116.27702103214757,40.04737826867027
    //{longitude: 116.27702103214757, latitude: 40.04737826867027}
</script>

</html>